<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>layui在线调试</title>
		<link rel="stylesheet" href="../../../layui/css/layui.css" media="all">
		<style>

		</style>
	</head>
	<body>

		<form class="layui-form" action="">
			
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">故障描述</label>
				<div class="layui-input-block">
					<textarea placeholder="请输入内容" class="layui-textarea" >高压仓、进出水阀门、加压阀都存在安全隐患，请及时处理。</textarea>
				</div>
			</div>
			
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">部门</label>
					<div class="layui-input-inline">
						<select name="modules" lay-verify="required" lay-search="">
							<option value="">直接选择或搜索选择</option>
							<option value="1">科信部</option>
							<option value="2">后勤部</option>
							<option value="3">运行部</option>
							<option value="4">综合部</option>
							<option value="5">行政部</option>
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">处理人</label>
					<div class="layui-input-inline">
						<select name="modules" lay-verify="required" lay-search="">
							<option value="">直接选择或搜索选择</option>
							<option value="1">李硕</option>
							<option value="2">王鑫</option>
							<option value="3">高鑫</option>
							<option value="4">张强</option>
							<option value="5">刘湘</option>
						</select>
					</div>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">取消</button>
				</div>
			</div>
			</from>
	</body>
	<script src="../../../layui/layui.js"></script>
	<script src="../../libs/echarts/echarts.min.js"></script>
	<script src="../../libs/echarts/echartsTheme.js"></script>
	<script>
		layui.use(['form', 'layedit', 'laydate'], function() {
			var form = layui.form,
				layer = layui.layer,
				layedit = layui.layedit,
				laydate = layui.laydate;

			//日期
			laydate.render({
				elem: '#date'
			});
			laydate.render({
				elem: '#date1'
			});

			//创建一个编辑器
			var editIndex = layedit.build('LAY_demo_editor');

			//自定义验证规则
			form.verify({
				title: function(value) {
					if (value.length < 5) {
						return '标题至少得5个字符啊';
					}
				},
				pass: [
					/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'
				],
				content: function(value) {
					layedit.sync(editIndex);
				}
			});

			//监听指定开关
			form.on('switch(switchTest)', function(data) {
				layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
					offset: '6px'
				});
				layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
			});

			//监听提交
			form.on('submit(demo1)', function(data) {
				layer.alert(JSON.stringify(data.field), {
					title: '最终的提交信息'
				})
				return false;
			});

			//表单赋值
			layui.$('#LAY-component-form-setval').on('click', function() {
				form.val('example', {
					"username": "贤心" // "name": "value"
						,
					"password": "123456",
					"interest": 1,
					"like[write]": true //复选框选中状态
						,
					"close": true //开关状态
						,
					"sex": "女",
					"desc": "我爱 layui"
				});
			});

			//表单取值
			layui.$('#LAY-component-form-getval').on('click', function() {
				var data = form.val('example');
				alert(JSON.stringify(data));
			});

		});
	</script>
</html>
